@import '~@common/layout/frame/config.less';

@rightNavWidth:200px;
@bannerWidth:600px;

.clearfloat{
  zoom:1;
  &::after{
    clear:both;
    content:'';
    display:block;
    height:0;
    visibility:hidden;
  }
}

.frame-top-bar{
  background-color:#1565A7;
  .top-bar-wrap{
    max-width:@maxWidth;
    height:@topbarHeight;
    line-height:@topbarHeight;
    margin:0 auto;
    position:relative;
    // background:linear-gradient(to right,#31527e,#274366);
    .topbar-banner{
      position:absolute;
      top:0;
      left:0;
      height:@topbarHeight;
      width:@bannerWidth;
      // padding:0 15px;
      // background-color:@bannerBgColor;
      .topbar-logo{
        position:absolute;
        height:100%;
        padding-left:5px;
        // padding-right:10px;
        font-size:0;
        >img{
          height:48%;
          border-radius:50%;
        }
      }
      .topbar-title{
        color:#f8f8f8;
        padding-left:42px;
        padding-right:10px;
        font-size:20px;
        font-weight:500;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
      }
    }
    .topbar-nav{
      padding-left:@bannerWidth;
      // background-color:@navBgColor;
      color:#f0f0f0;
      .clearfloat;
      ul{
        margin:0;
        overflow:hidden;
        li{
          float:left;
          a{
            font-size:12px;
            display:block;
            padding:0 10px;
            position:relative;
            &::after{
              content:'';
              position:absolute;
              width:1px;
              height:40%;
              right:0;
              top:30%;
              background-color:#fafafa;
            }
          }
          &:last-of-type{
            a{
              &::after{
                display:none;
              }
            }
          }
        }
      }
      .topbar-nav-left{
        float:left;
      }
      .topbar-nav-right{
        float:right;
        padding-left:10px;
        // padding-right:15px;
        .topbar-right-top{
          height:calc(@topbarHeight / 2);
          line-height:calc(@topbarHeight / 2);
          overflow:hidden;
          ul{
            float:right;
          }
        }
        .topbar-right-bottom{
          height:calc(@topbarHeight / 2);
          line-height:calc(@topbarHeight / 2);
          overflow:hidden;
          ul{
            float:right;
          }
        }
      }
    }
  }
}

@media screen and (max-width:1024px){
  .frame-top-bar{
    .top-bar-wrap{
      .topbar-banner{
        display:none;
      }
      .topbar-nav{
        padding-left:30px;
      }
    }
  }
}

@media screen and (max-width:768px){
  .frame-top-bar{
    .top-bar-wrap{
      .topbar-nav{
        .topbar-nav-left{
          display:none;
        }
        .topbar-nav-right{
          width:100%;
        }
      }
    }
  }
}










